<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo17</title>

    <style>
        .true {
            color: blue;
        }
        .false {
            color: red;
        }
    </style>
</head>
<body>
    <input class="restartGame" type="button" value="重新开启一局游戏" onclick="restart()"> <br>
    请输入要猜的数字：<input class="guess" type="text" value="0"> <input type="button" value="猜" onclick="readyGuess()"><br>
    已经猜的次数：<span class="guessNumber">0</span><br>
    结果：<span class="guessReturn"></span>

</body>
<script>
    let guess = document.querySelector('.guess');
    console.dir(guess);
    let guessNumber = document.querySelector('.guessNumber');
    console.dir(guessNumber);
    function restart() {
        guess.value=0;
        guessNumber.innerHTML=0;
    }

    //生成1~100的随机值
    let randomNumber = Math.floor(Math.random()*100) + 1;
    let guessReturn = document.querySelector('.guessReturn');
    console.log(randomNumber);
    function readyGuess () {
        let num = parseInt(guess.value);
        guessNumber.innerHTML = parseInt(guessNumber.innerHTML) + 1;

        if (num > randomNumber) {
            guessReturn.innerHTML="猜大了";
            guessReturn.className='false';

        }else if (num < randomNumber) {
            guessReturn.innerHTML="猜小了"
            guessReturn.className='false';
        }else {
            guessReturn.innerHTML='猜中了';
            guessReturn.className='true';
        }
    }


</script>
</html>